<!-- header logo: style can be found in header.less -->
<header class="header">
	<a href="${domainUrl!}/index" class="logo"> <img
		src="${domainUrl!}/img/logo.png" /> 
	</a>
	<!-- Header Navbar: style can be found in header.less -->
	<nav class="navbar navbar-static-top" role="navigation">
		<div class="navbar-right">
			<ul class="nav navbar-nav">
				<!-- Notifications: style can be found in dropdown.less -->
				
				<!-- User Account: style can be found in dropdown.less -->
				<li class="dropdown user user-menu" style="margin: 0;"><a
					href="#" class="dropdown-toggle" data-toggle="dropdown"> <i
						class="glyphicon glyphicon-user"></i> <span><span
							id="name2"></span> <i class="caret"></i></span>
				</a>
					<ul class="dropdown-menu" style="padding: 0">
						<!-- User image -->
						<li class="user-header bg-light-blue">
							<ul class="pull-left" style="border: none;">
								<li id="email">账号：18388888888@163.com</li>
								<li id="name">姓名：小明</li>
								<li id="roleName">角色：销售经理</li>
							</ul>
						</li>
						<!-- Menu Footer-->
						<li class="user-footer">
							<div class="pull-left" style="border: none;">
								<a href="#" class="btn btn-default btn-flat change_btn"
									data-toggle="modal" data-target="#myModal0" data-backdrop="static">修改密码</a>
							</div>
							<div class="pull-right">
								<a id="exit" href="#" class="btn btn-default btn-flat">退出</a>
							</div>
						</li>
					</ul></li>
			</ul>
		</div>
	</nav>
</header>



<!--修改密码弹框-->
<div class="modal fade" id="myModal0" tabindex="-1" role="dialog"
	aria-labelledby="myModalLabel" aria-hidden="true" >
	<div id="modal-dialog" class="modal-dialog" style="width: 420px;">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"
					aria-hidden="true">&times;</button>
				<h4 class="modal-title" id="myModalLabel">修改密码</h4>
			</div>
			<div class="modal-body">
				<div class="change_pw">
				<form id="passwordform" action="">
					<div class="old_pw form-group">
						<div class="input-group input-password">
							<span class="input-group-addon new_add">原密码</span> 
							<input id="oldPassword" name="oldPassword" class="form-control" placeholder="请输入原密码" type="password">
						</div>
					</div>
					<div class="new_pw form-group">
						<div class="input-group input-password">
							<span class="input-group-addon">设置新密码</span> <input
								id="newPassword1" name="newPassword" class="form-control"
								placeholder="请输入新密码" type="password">
						</div>
						<div class="pw_hint">密码由6~8位字母（字母区分大小写）和数字组成</div>
					</div>
					<div class="beSure_pw form-group">
						<div class="input-group input-password">
							<span class="input-group-addon">确认新密码</span> 
							<input id="newPassword2" name="newPassword2" class="form-control" placeholder="请输入密码" type="password">
						</div>
					</div>
					</form>
				</div>
			</div>
			<div class="modal-footer">
				<button id="delete" type="button" class="btn btn-default"
					data-dismiss="modal">取消</button>
				<button id="updatePassword" type="button" class="btn btn-primary">提交更改</button>
			</div>
		</div>
		<!-- /.modal-content -->
	</div>
	<!-- /.modal -->
</div>

<style type="text/css">
		.user-header ul {
			margin-top: 5px;
			margin-left: 5px;
			padding: 0;
		}
		
		.user-header ul li {
			color: rgba(255, 255, 255, 0.8);
			text-align: left;
			margin-top: 20px;
			font-size: 17px;
			list-style: none;
		}
		.change_pw{
			width: 80%;
			margin: auto;
		}
		.old_pw, .new_pw, .beSure_pw{
			margin-top: 25px;
		}
		.pw_hint,.pw_hint_old,.pw_hint_new,.pw_hint_new2{
			font-size:12px;
			margin-top:5px;
			color:red;
		}
		.pw_hint1{
			font-size:12px;
			margin-top:5px;
			color:red;
		}
		
		
		.new_add {
			padding: 6px 27px;
		}
		
		.sure {
			margin-right: 15px;
		}
		
		.sure a {
			margin: 20px 10px 0 0;
		}
		
		.change_delet {
			margin: 10px 10px 0 0;
		}
		
		#delete {
			cursor: pointer;
		} 
		.close {
			margin-right: 10px;
			margin-top: 5px;
		}
		/* bootstrapt表单验证错误成功颜色控制样式 */
		.form-group.has-success label{
	  		color: #000;
		}
		.form-group.has-error label{
	  		color: #000;
		}
</style>

<script src="${domainUrl!}/js/jquery.min.js" type="text/javascript"></script>
<link href="${domainUrl!}/css/sweet-alert.css" rel="stylesheet" type="text/css" />
<script src="${domainUrl!}/js/sweet-alert.min.js" type="text/javascript"></script>
<script src="${domainUrl!}/js/sweetAlert.js" type="text/javascript"></script>


<script type="text/javascript">
	$('.masking').hide();
	$('.change_pw').hide();

	$('.change_btn').click(function() {
		$('.change_pw').show();
		$('.masking').show();
	});
	$('#delete').click(function() {
		$('.change_pw').hide();
		$('.masking').hide();
		$("#notSame").hide();
		$('#passwordform')[0].reset();
		$('.pw_hint_old').remove();
		$('.pw_hint_new').remove();
		$('.pw_hint_new2').remove();
	});
	$('.close').click(function() {
		$('.change_pw').hide();
		$('.masking').hide();
		$("#notSame").hide();
		$('#passwordform')[0].reset();
		$('.pw_hint_old').remove();
		$('.pw_hint_new').remove();
		$('.pw_hint_new2').remove();
	});
	$('#exit').click(function() {
		window.location.href = "${domainUrl!}/logout";
	})
	$('#newPassword1').focus(function() {
		$("#notSame").hide();
	});
	$('#newPassword2').focus(function() {
		$("#notSame").hide();
	});
	$(function() {
		//向服务端获取当前用户基本信息
		var url = "${domainUrl!}/sysuser/getUser";
		$.ajax({
			"url" : url,
			"type" : "get",
			"dataType" : "json",
			"success" : function(result) {
				if (result.head.respCode == "0000000") {
					$('#name2').html(result.body.name);
					$('#email').html("账号：" + result.body.email);
					$('#name').html("姓名：" + result.body.name);
					var roleName = "角色：";
					for (var i = 0; i < result.body.roleName.length; i++) {
						roleName += result.body.roleName[i] + "、";
					}
					roleName = roleName.substring(0, roleName.length - 1);
					$('#roleName').html(roleName);
				}
			}
		});
		//修改密码
		$('#updatePassword').click(function() {
			var b = pwVerify();
			if(!b){
				return;
			}
			var formData = new FormData($('#passwordform')[0]);
			url = "${domainUrl!}/sysuser/updatePassword";
			$.ajax({
						url : url,
						type : "post",
						data : formData,
						dataType : "json",
						async : false,
						cache : false,
						contentType : false,
						processData : false,
						success : function(result) {
							if (result.head.respCode == "0000000") {
								success("密码修改成功，请重新登录",function(){
									window.location.href = "${domainUrl!}/logout";
								})
								
							}else{
								alert(result.body);
								$('#passwordform')[0].reset();
							}
						}
					});
		});
	})
	$('#oldPassword').blur(function(){
		var oldPw = $(this);
		oldPwVerify(oldPw);
	});
	$('#newPassword1').blur(function(){
		var newPw = $(this);
		newPwVerify(newPw);
	});
	$('#newPassword2').blur(function(){
		var newPw2 = $(this);
		newPwVerify2(newPw2);
	});
	//原密码验证
	function oldPwVerify(oldPw){
		$('.pw_hint_old').remove();
		var value = oldPw.val();
		if(value==""){
			oldPw.parent().parent().append($('<div class="pw_hint_old">原密码不能为空</div>'));
			return false;
		}
		if(value!=""){
			$('.pw_hint_old').remove();
			return true;
		}
	}
	//新密码验证
	function newPwVerify(newPw){
		$('.pw_hint_new').remove();
		var value = newPw.val();
		if(value==""){
			newPw.parent().parent().append($('<div class="pw_hint_new">新密码不能为空</div>'));
			return false;
		}
		var reg = /^[0-9a-zA-Z]{6,8}$/;
		if(!value.match(reg)){
			newPw.parent().parent().append($('<div class="pw_hint_new">密码不符合规则</div>'));
			return false;
		}
		if(value!=""&&value.match(reg)){
			$('.pw_hint_new').remove();
			return true;
		}
	}
	//确认密码验证
	function newPwVerify2(newPw2){
		$('.pw_hint_new2').remove();
		var value = newPw2.val();
		if(value==""){
			newPw2.parent().parent().append($('<div class="pw_hint_new2">确认密码不能为空</div>'));
			return false;
		}
		if(value!=$('#newPassword1').val()){
			newPw2.parent().parent().append($('<div class="pw_hint_new2">两次密码不相等</div>'));
			return false;
		}
		if(value!=""&&value==$('#newPassword1').val()){
			$('.pw_hint_new2').remove();
			return true;
		}
	}
	//点击密码
	function pwVerify(){
		var oldPw = $('#oldPassword');
		var b1 = oldPwVerify(oldPw);
		var newPw = $('#newPassword1');
		var b2 = newPwVerify(newPw);
		var newPw2 = $('#newPassword2');
		var b3 = newPwVerify2(newPw2);
		if(b1&&b2&&b3){
			return true;
		}else{
			return false;
		}
	}
</script>
